import { RouterProvider, createBrowserRouter, RouteObject } from 'react-router-dom'
import { ErrorPage } from '@views/ErrorPage'

import { ReactNode } from 'react'

import { IconProps, IconSearchStroked, IconMoon, IconSun, IconServer } from '@douyinfe/semi-icons'

import { IconTreeSelect, IconBreadcrumb, IconBadge } from '@douyinfe/semi-icons-lab'

import { routes as PanelRoutes } from './Panel'

import App from '@/App'

import RouterLayout from '@/components/layout/RouterLayout'
import Login from '@/views/Login'
import Register from '@/views/Register'
import ForgotPass from '@/views/ForgotPass'

export interface Route {
  id?: string
  path: string
  index?: boolean
  isNav?: boolean
  Component?: React.ComponentType
  element?: ReactNode
  children?: Route[]
  name?: string
  Icon?:
    | React.ForwardRefExoticComponent<
        Omit<Omit<IconProps, 'svg' | 'type'>, 'ref'> & React.RefAttributes<HTMLSpanElement>
      >
    | ReactNode
  meta?: {}
  errorElement?: React.ReactNode | null
  ErrorBoundary?: React.ComponentType | null
}

export const routes: Route[] = [
  {
    id: 'auth',
    path: '/',
    Component: App,
    children: [
      {
        id: 'auth-index',
        path: '',
        Component: Login,
      },
      {
        id: 'auth-register',
        path: 'register',
        Component: Register,
      },
      {
        id: 'auth-forgotpass',
        path: 'forgotpass',
        Component: ForgotPass,
      },
      {
        path: '*',
        element: <ErrorPage />,
      },
    ],
  },
  {
    // isNav: true,
    id: 'panel',
    path: '/panel',
    Component: RouterLayout,
    Icon: <IconBadge />,
    children: [
      ...PanelRoutes,
      {
        path: '*',
        element: <ErrorPage />,
      },
    ],
  },
]

const router = createBrowserRouter(routes as RouteObject[], {
  basename: import.meta.env.VITE_PUBLIC_PATH as string,
})

export const Router = () => {
  return <RouterProvider router={router} />
}
